{% stylesheet %}
.block_title h1 {
  font-size: var(--title_font_size);
  color: var(--title_color);
  font-family: var(--title_font_family);
  font-style: var(--title_font_style);
  font-weight: var(--title_font_weigth);
  letter-spacing: var(--title_letter_spacing);
}
  .blog_collection_default .collection_content ul {
    display: grid;
    row-gap: 30px;
    column-gap: 30px;
    grid-template-columns: repeat(var(--pc-number), 1fr);
    text-align: var(--text-align);
  }

  .blog_collection_default .collection_content li {
    list-style-type: none;
    overflow: hidden;
  }

  .blog_collection_default .collection_content li .collection_pic {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-bottom: 30px;
  }

  .blog_collection_default .collection_content li .collection_img {
    width: 100%;
  }

  .blog_collection_default .collection_content li .collection_pic img {
    width: 100%;
    object-fit: cover;
  }

  .blog_collection_default .collection_content li .collection_name {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--title_color);
    font-size: var(--product_font_size);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .blog_collection_default .collection_content li .blog_collection_list_detail {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--detail_color);
  }
  .blog_collection_default .collection_content li .more a {
    color: var(--detail_color);
  }


  @media (max-width: 767px) {
    .blog_collection_default .collection_content ul {
      row-gap: 15px;
      column-gap: 15px;
      grid-template-columns: repeat(2, 1fr);
    }
  }
{% endstylesheet %}

{%- capture fill_container -%}
  {%- if section.settings.is_fill -%}
    full_container_wrapper
  {%- else -%}
    container_wrapper
  {%- endif -%}
{%- endcapture -%}

<div class="blog_collection_default {{ fill_container }}" id="blog_collection">
  {% if section.settings.title != '' or section.settings.detail != '' %}
    <div class="block_title">
        {% if section.settings.title != '' %}<h1>{{ section.settings.title }}</h1>{% endif %}
        {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail|html_content_filter }}</div>{% endif %}
    </div>
  {% endif %}
  <div class="plugin-container-header"></div>

  <div class="collection_content" style="--text-align: {{ section.settings.text_align }};--pc-number: {{ section.settings.number }};">
    {% assign collection_ids = section.blocks | get_array_values: "collection" | get_array_values: "id" | join: "," %}

    {% if collection_ids != "" %}
      {% get_news ids = {collection_ids} limit = {section.settings.pagesize} %}
      <ul>
        {% for item in news %}
          <li>
            {%- if section.settings.is_show_img -%}
              {%- if item.image_alt == "" -%}
                {% assign article_alt = item | image_alt:'news'   %}
              {%- else -%}
                {% assign article_alt = item.image_alt %}
              {%- endif -%}
              <a class="collection_pic" href="/news/{{ item.handle }}">
                <div class="collection_img">
                  <img
                    data-src="{{ item.src|public_front_asset_url }}"
                    src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"
                    alt="{{ article_alt }}"
                  >
                </div>
              </a>
            {%- endif -%}
            <a href="/news/{{ item.handle }}" class="collection_name">
              {{ item.title }}
            </a>
            {%- if section.settings.is_show_detail -%}
            <div class="blog_collection_list_detail">
              {{ item.descript }}
            </div>
            {%- endif -%}
            {%- if section.settings.read_more != '' -%}
              <div class="more">
                <a href="/news/{{ item.handle }}">{{ section.settings.read_more }}</a>
              </div>
            {%- endif -%}
          </li>
        {% endfor %}
      </ul>
      {% include pagination ,{ paginate : newsPaginate } %}
    {% else %}
      {% assign list_size = news.list | size %}
      {% if list_size > 0 %}
        <ul>
          {% for item in news.list %}
            <li>
              {%- if section.settings.is_show_img -%}
                {%- if item.image_alt == "" -%}
                  {% assign article_alt = item | image_alt:'news'   %}
                {%- else -%}
                  {% assign article_alt = item.image_alt %}
                {%- endif -%}
                <a class="collection_pic" href="/news/{{ item.handle }}">
                  <div class="collection_img">
                    <img
                      data-src="{{ item.src|public_front_asset_url }}"
                      src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}"
                      alt="{{ article_alt }}"
                    >
                  </div>
                </a>
              {%- endif -%}
              <a href="/news/{{ item.handle }}" class="collection_name">
                {{ item.title }}
              </a>
              {%- if section.settings.is_show_detail -%}
              <div class="blog_collection_list_detail">
                {{ item.descript }}
              </div>
              {%- endif -%}
              {%- if section.settings.read_more != '' -%}
                <div class="more">
                  <a href="/news/{{ item.handle }}">{{ section.settings.read_more }}</a>
                </div>
              {%- endif -%}
            </li>
          {% endfor %}
        </ul>
        {% include pagination ,{ paginate : paginate } %}
      {% else %}
        {% include 'empty', text: lang.general.no_news %}
      {% endif %}
    {% endif %}
    
    <div class="plugin-container-footer"></div>
  </div>
</div>


{% schema %}
{
	"tag": "section",
	"class": "blog_collection",
	"is_global": false,
	"name": {
		"zh_CN": "博客专辑列表",
		"en_US": "Blog Collection List"
	},
	"max_blocks": 20,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "id": "title",
      "default": "News"	
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "简短描述",
        "en_US": "Description"
      },
      "id": "detail",
      "default": ""
    },
    {
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_fill",
			"default": "false"
		},
    {
			"type": "card_switch",
			"label": {
				"zh_CN": "显示封面图片",
				"en_US": "Show cover image"
			},
			"id": "is_show_img",
			"default": "true"
		},
    {
			"type": "card_switch",
			"label": {
				"zh_CN": "显示简短描述",
				"en_US": "Show short description"
			},
			"id": "is_show_detail",
			"default": "false"
		},
    {
      "type": "card_select",
      "label": {
        "zh_CN": "文本对齐方式",
        "en_US": "Text alignment"
      },
      "default": "center",
      "id": "text_align",
      "option": [
        {
          "label": {
            "zh_CN": "居左",
            "en_US": "Left"
          },
          "value": "left"
        },
        {
          "label": {
            "zh_CN": "居中",
            "en_US": "Center"
          },
          "value": "center"
        },
        {
          "label": {
            "zh_CN": "居右",
            "en_US": "Right"
          },
          "value": "right"
        }
      ]
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "每排数量",
        "en_US": "Number of rows"
      },
      "id": "number",
      "max": 5,
      "min": 1,
      "unit": "",
      "default": 3,
      "info": {
        "zh_CN": "只对PC有效",
        "en_US": "Only valid for PC"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "阅读全文文案",
        "en_US": "Read more text"
      },
      "id": "read_more",
      "default": "Read More >"	
    },
    {
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		},
		{
			"type": "card_input_number",
			"max": 80,
			"min": 8,
			"id": "pagesize",
			"label": {
				"zh_CN": "专辑每页数量",
				"en_US": "Album page size"
			},
			"info": {
				"zh_CN": "默认数量12个;最小8个、最大80个;",
				"en_US": "Default number 12, minimum 8, maximum 80;"
			},
			"refresh": true,
			"default": 12
		}
	],
	"blocks": [
    {
			"name": {
				"zh_CN": "博客专辑列表",
				"en_US": "Blog Collection List"
			},
			"type": "item",
			"settings": [
				{
          "type": "card_album",
          "label": {
            "zh_CN": "选择专辑",
            "en_US": "Select collection"
          },
          "default": {
              "id": "",
              "title": ""
          },
          "refresh": true,
          "id": "collection"
        }
			]
		}
  ],
	"default": {
		"settings": {
      "title": "News",
      "detail": "",
      "is_fill": false,
      "is_show_img": true,
      "is_show_detail": false,
      "text_align": "center",
      "number": 3,
      "read_more": "Read More >",
			"pagesize": 12,
      "refresh": true
		},
		"blocks": [
      {
        "collection": {
          "id": "",
          "title": ""
        },
        "block_type": "item"
      }
    ]
	}
}
{% endschema %}

